import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { toJS } from 'mobx';
import { loginButtonDef } from './loginButton';

@inject('portalLoginStore')
@observer
class LoginBtn extends React.Component {
    constructor(props) {
        super(props);
        this.onLogin = this.onLogin.bind(this);
    }

    render() {
        const { portalLoginStore } = this.props;
        const { labelObj, state, getElementStyle } = portalLoginStore;
        const {
            isLogging,
            loginSettingInfo = {},
            loginFormItems,
        } = state;
        let _loginFormItems = toJS(loginFormItems);
        let loginLength = _loginFormItems.length;
        let { loginButton, loginForm = {} } = loginSettingInfo;
        if (loginButton == undefined) {
            if (loginForm.isAbsolute == 0) {
                loginButtonDef.isAbsolute = loginForm.isAbsolute;
                loginButtonDef.level = loginForm.level;
                loginButtonDef.levelMargin = loginForm.levelMargin;
                loginButtonDef.vertical = loginForm.vertical;
                if (loginForm.vertical == 'bottom') {
                    loginButtonDef.verticalMargin = loginForm.verticalMargin;
                } else {
                    loginButtonDef.verticalMargin = loginForm.verticalMargin + 122;
                }
                loginButtonDef.color = loginForm.color;
                loginButtonDef.backgroundColor = loginForm.backgroundColor;
                loginButtonDef.x = loginForm.x;
                loginButtonDef.y = loginForm.y;
                loginButtonDef.rate_x = loginForm.rate_x;
                loginButtonDef.rate_y = loginForm.rate_y;
                loginButtonDef.isloginbtn = false;
                loginButton = loginButtonDef;
            } else if (loginForm.isAbsolute == 1) {
                loginButtonDef.isAbsolute = loginForm.isAbsolute;
                loginButtonDef.level = loginForm.level;
                loginButtonDef.levelMargin = loginForm.levelMargin;
                loginButtonDef.vertical = loginForm.vertical;
                loginButtonDef.verticalMargin = loginForm.verticalMargin;
                loginButtonDef.color = loginForm.color;
                loginButtonDef.backgroundColor = loginForm.backgroundColor;
                loginButtonDef.x = loginForm.x;
                loginButtonDef.y = loginForm.y;
                loginButtonDef.rate_x = loginForm.rate_x;
                loginButtonDef.rate_y = loginForm.rate_y;
                loginButtonDef.isloginbtn = false;
                loginButton = loginButtonDef;
            }
        }
        const submitStyle = loginButton.imgbtn == false ?
        {
            width: loginButton.width,
            height: loginButton.height,
        } : {
            width: loginButton.imgWidth,
            height: loginButton.imgHeight,
        };
        const btnStyle = {
            width: loginButton.width,
            height: loginButton.height,
            color: loginButton.color,
            backgroundColor: loginButton.backgroundColor,
            fontSize: loginButton.fsize,
            borderRadius: loginButton.borderR,
            opacity: loginButton.opacity * 0.01,
        };
        const imgbtnStyle = {
            width: loginButton.imgWidth - 2,
            height: loginButton.imgHeight,
            color: loginButton.imgColor,
            fontSize: loginButton.imgFsize,
            backgroundColor: 'rgba(255,255,255,0)',
            backgroundImage: `url(${loginButton.content})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: `${loginButton.imgWidth - 2}px  ${loginButton.imgHeight}px`,
        };
        const btnImgStyle = {
            width: loginButton.imgWidth - 2,
            height: loginButton.imgHeight,
        };
        let topstyle = '';
        let _top = '';
        if (loginButton.isloginbtn == false) {
            topstyle = `calc(${loginButton.rate_y * 100}% + 256px)`;
        } else {
            topstyle = `${loginButton.rate_y * 100}% `;
        }
        let sub = parseInt($('.e9login-content .e9login-btn').css('top')) - parseInt($('.e9login-content .e9login-form-box').css('top'));
        let forgeth = $('.e9login-form-remember').height();
        if (parseInt(sub) > 208 && parseInt(sub) < 238) {
            if (loginLength < 3) {
              if (forgeth > 20) {
                _top = 20;
              } else {
                _top = 0;
              }
            } else if (forgeth > 20) {
              _top = (loginLength - 2) * 65 + 20;
            } else {
              _top = (loginLength - 2) * 65;
            }
        } else if (loginLength < 3) {
            _top = 0;
         } else {
            _top = (loginLength - 2) * 65;
         }

        return (
            <div className="e9login-element e9login-btn" style={{ paddingTop: `${_top}px`, top: `${topstyle}`, ...getElementStyle(loginButton) }}>
                {loginButton.imgbtn == false ?
                    <div className="e9login-form-submit e9login-submit" style={submitStyle}>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jsr15m`} type="primary" loading={isLogging} id="submit" name="submit" className="e9login-form-submit-btn" style={btnStyle} onClick={this.onLogin}>
                            {labelObj.login}
                        </Button>
                    </div> :
                    <div className="e9login-form-submit e9login-submit" style={submitStyle}>
                        <div style={{ ...btnImgStyle, opacity: loginButton.imgopacity * 0.01 }}>
                        {loginButton.isShowtext == true ?
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zpx66h`} type="primary" loading={isLogging} id="submit" name="submit" className="e9login-form-submit-btn" style={imgbtnStyle} onClick={this.onLogin}>
                                {labelObj.login}
                            </Button>
                            : <div className="e9login-submit-img" style={{ cursor: 'pointer' }} onClick={this.onLogin}><img src={loginButton.content} style={btnImgStyle} /></div>
                        }
                        </div>
                    </div>
                }

            </div>
        );
    }
    onLogin() {
        const { portalLoginStore } = this.props;
        portalLoginStore.onLogin();
    }
}

export default LoginBtn;
